<style lang="less">
    @import "./infoShow.less";
</style>
<template>
    <div class="message-main-con" >
        <transition>
            <div v-if="showMesTitleList" class="message-title-list-con">
                <div class="lunbo">
                    <Carousel autoplay loop :radius-dot="true" :autoplay-speed="5000" class="carousel" dots="false">
                        <CarouselItem v-for="(item, i) in bannerData" :key="i" class="carouselItem">
                            <div class="lunboTitle"> {{item.title}}</div>
                            <img :src="item.img" >
                        </CarouselItem>
                    </Carousel>

                    <Spin fix size="large" v-if="lbloading"></Spin>
                </div>
                <div class="tongzhi">
                    <Card style="width:100%;height: 100%">
                        <p slot="title" class="pTitle">
                            通知公告
                        </p>
                        <Table ref="tzMesList" :loading="tzloading" :show-header="showHead" :columns="mesTitleColumns" :data="tzMesList" :no-data-text="noDataText"></Table>
                        <Page  class="page-fix" :current="tzParams.pageNumber" :total="tzTotal" :page-size="tzParams.pageSize" @on-change="tzChangePage"   size="small" show-total show-elevator></Page>
                    </Card>
                </div>
                <div class="xinwen">
                    <Card style="width:100%;height: 100%">
                        <p slot="title" class="pTitle">
                            新闻动态
                        </p>
                        <Table ref="xwMesList" :loading="xwloading" :show-header="showHead" :columns="mesTitleColumns" :data="xwMesList" :no-data-text="noDataText"></Table>
                        <Page  class="page-fix" :current="xwParams.pageNumber" :total="xwTotal" :page-size="xwParams.pageSize" @on-change="xwChangePage"   size="small" show-total show-elevator></Page>
                    </Card>
                </div>
                <div class="zhengce">
                    <Card style="width:100%;height: 100%">
                        <p slot="title" class="pTitle">
                            政策法规
                        </p>
                        <Table ref="zcMesList" :loading="zcloading" :show-header="showHead" :columns="mesTitleColumns" :data="zcMesList" :no-data-text="noDataText"></Table>
                        <Page  class="page-fix" :current="zcParams.pageNumber" :total="zcTotal" :page-size="zcParams.pageSize" @on-change="zcChangePage"   size="small" show-total show-elevator></Page>
                    </Card>
                </div>
            </div>
        </transition>
        <transition>
            <div v-if="!showMesTitleList" class="message-view-content-con">
                <div class="message-content-top-bar">
                    <span class="mes-back-btn-con"><Button type="text" @click="backMesTitleList"><Icon type="ios-arrow-back" style="margin-bottom:2px"></Icon>&nbsp;&nbsp;返回</Button></span>
                    <h3 class="mes-title">{{ mes.title }}</h3>
                </div>
                <p class="mes-time-con">
                    <Icon type="android-time"></Icon><span class="mes-con-span">发布人&nbsp;:&nbsp;</span>{{mes.auth}}<span class="mes-con-span">&nbsp;&nbsp;&nbsp;&nbsp;发布时间&nbsp;:&nbsp;</span>{{ mes.time }}</p>
                <div class="message-content-body">
                    <p class="message-content" v-html="mes.content">{{ mes.content }}</p>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
    export default {
        name: "infoShow",
        data() {
            return {
                showMesTitleList:true,
                showHead:false,
                bannerData: [],
                mesTitleColumns: [
                    {
                        type: "index",
                        width: 50,
                        align: "center"
                    },
                    {
                        title: " ",
                        key: "title",
                        align: "left",
                        ellipsis: true,
                        render: (h, params) => {
                            return h("span", [
                                h(
                                    "a",
                                    {
                                        style: {
                                            margin: "0 30px 0 0",
                                            fontSize:"16px",
                                        },
                                        on: {
                                            click: () => {
                                                this.showMesTitleList = false;
                                                this.mes.auth = params.row.createBy;
                                                this.mes.title = params.row.title;
                                                this.mes.time = params.row.createTime;
                                                this.getContent(params.row);
                                            }
                                        }
                                    },
                                    params.row.title
                                )
                            ]);
                        }
                    },
                    {
                        title: " ",
                        key: "time",
                        align: "center",
                        width: 180,
                        render: (h, params) => {
                            return h("span", [
                                h("Icon", {
                                    props: {
                                        type: "md-time",
                                        size: 12
                                    },
                                    style: {
                                        margin: "0 5px 3px 0"
                                    }
                                }),
                                h("span", params.row.createTime)
                            ]);
                        }
                    }
                ],
                noDataText:"暂无消息",

                lbloading:true,
                lbParams: {
                    type:"5",
                    flag:"1",
                    pageNumber: 1, // 当前页数
                    pageSize: 6, // 页面大小
                    sort: "create_time", // 默认排序字段
                    order: "desc" // 默认排序方式
                },

                tzMesList: [],
                tzloading:true,
                tzParams: {
                    type:"0",
                    flag:"1",
                    pageNumber: 1, // 当前页数
                    pageSize: 6, // 页面大小
                    sort: "create_time", // 默认排序字段
                    order: "desc" // 默认排序方式
                },
                tzTotal:"0",

                xwMesList: [],
                xwloading:true,
                xwParams: {
                    type:"1",
                    flag:"1",
                    pageNumber: 1, // 当前页数
                    pageSize: 6, // 页面大小
                    sort: "create_time", // 默认排序字段
                    order: "desc" // 默认排序方式
                },
                xwTotal:"0",

                zcMesList: [],
                zcloading:true,
                zcParams: {
                    type:"2",
                    flag:"1",
                    pageNumber: 1, // 当前页数
                    pageSize: 6, // 页面大小
                    sort: "create_time", // 默认排序字段
                    order: "desc" // 默认排序方式
                },
                zcTotal:"0",
                mes: {
                    auth:"",
                    title: "",
                    time: "",
                    content: ""
                },
            };
        },
        methods: {
            Init() {
                this.getTzMes();
                this.getXwMes();
                this.getZcMes();
                this.getLbMes();
            },
            getTzMes(){
                this.tzloading = true;
                // 带多条件搜索参数获取表单数据 请自行修改接口
                this.getRequest("/information/getByCondition", this.tzParams).then(res => {
                    this.tzloading = false;
                    if (res.success) {
                        this.tzMesList = res.result.records;
                        this.tzTotal = res.result.total;
                    }
                });
            },
            getLbMes(){
                this.lbloading = true;
                // 带多条件搜索参数获取表单数据 请自行修改接口
                this.getRequest("/information/getByCondition", this.lbParams).then(res => {
                    this.lbloading = false;
                    if (res.success) {
                        this.bannerData = res.result.records;
                    }
                });
            },
            getXwMes(){
                this.xwloading = true;
                // 带多条件搜索参数获取表单数据 请自行修改接口
                this.getRequest("/information/getByCondition", this.xwParams).then(res => {
                    this.xwloading = false;
                    if (res.success) {
                        this.xwMesList = res.result.records;
                        this.xwTotal = res.result.total;
                    }
                });
            },
            getZcMes(){
                this.zcloading = true;
                // 带多条件搜索参数获取表单数据 请自行修改接口
                this.getRequest("/information/getByCondition", this.zcParams).then(res => {
                    this.zcloading = false;
                    if (res.success) {
                        this.zcMesList = res.result.records;
                        this.zcTotal = res.result.total;
                    }
                });
            },
            getContent(v) {
                this.mes.content = v.content;
            },
            backMesTitleList() {
                this.showMesTitleList = true;
            },
            tzChangePage(v) {
                this.tzParams.pageNumber = v;
                this.getTzMes();
            },
            xwChangePage(v) {
                this.xwParams.pageNumber = v;
                this.getXwMes();
            },
            zcChangePage(v) {
                this.zcParams.pageNumber = v;
                this.getZcMes();
            },
        },
        mounted() {
            this.Init();
        }
    };
</script>